<template>
    <Split v-model="splitValue" class="demo-split">
        <div slot="left" class="demo-split-pane">
            <Row>
                <Col span="4">菜单树</Col>
                <Col span="20">
                    <CheckboxGroup v-model="dbEnvironment">
                        <Checkbox label="DAILY">日常</Checkbox>
                        <Checkbox label="PREPARE">预发</Checkbox>
                        <Checkbox label="PRODUCT">线上</Checkbox>
                    </CheckboxGroup>
                </Col>
            </Row>
            <Row>
                <Scroll :height="780">
                    <Card>
                        <Tree :data="menuTree" :load-data="loadMenuChildren" :render="renderContent"></Tree>
                    </Card>
                </Scroll>
            </Row>
            <Row>
                <Modal
                        title="添加菜单"
                        v-model="menuAddModal"
                        :mask-closable="false"
                        @on-ok="addMenu"
                        @on-cancel="cancelAddMenu">
                    <div>
                        <p>A/B/C</p>
                        <p style="padding: 8px 0;"></p>
                        <Input type="text" v-model="menu.id" placeholder="菜单ID" style="width: 300px;">
                            <Icon type="ios-menu-outline" slot="prepend"></Icon>
                        </Input>
                        <p style="padding: 6px 0;"></p>
                        <Input type="text" v-model="menu.code" placeholder="菜单编码" style="width: 300px;">
                            <Icon type="ios-menu-outline" slot="prepend"></Icon>
                        </Input>
                        <p style="padding: 6px 0;"></p>
                        <Input type="text" v-model="menu.name" placeholder="菜单名称" style="width: 300px;">
                            <Icon type="ios-menu-outline" slot="prepend"></Icon>
                        </Input>
                        <p style="padding: 6px 0;"></p>
                    </div>
                </Modal>

                <Modal
                        v-model="authorityModal"
                        :mask-closable="false" width="800">
                    <p slot="header">权限管理-A/B/C</p>
                    <div>
                        <div style="text-align: center; padding-bottom: 6px;">
                            <Button type="primary" ghost>添加权限</Button>
                        </div>
                        <!--<p style="padding: 6px 0;"></p>-->
                        <div>
                            <Table border :columns="columns7" :data="data6"></Table>
                        </div>
                    </div>
                </Modal>
            </Row>
        </div>
        <div slot="right" class="demo-split-pane">
            <Row>
                SQL预览
            </Row>
            <Row>
                <Row>
                    <Card>
                        <p slot="title">线上环境</p>
                        <p>Content of card</p>
                    </Card>
                </Row>
                <Row>
                    <Card>
                        <p slot="title">日常环境</p>
                        <p>Content of card</p>
                    </Card>
                </Row>
                <Row>
                    <Card>
                        <p slot="title">预发布环境</p>
                        <p>Content of card</p>
                    </Card>
                </Row>
                <Row>
                    <Card>
                        <p slot="title">测试环境</p>
                        <p>Content of card</p>
                    </Card>
                </Row>
            </Row>
        </div>
    </Split>
</template>

<script type="es6">
    import Split from "iview/src/components/split/split";
    import Modal from "iview/src/components/modal/modal";
    import Button from "iview/src/components/button/button";
    import Card from "iview/src/components/card/card";
    import Scroll from "iview/src/components/scroll/scroll";
    import Col from "iview/src/components/col";

    export default {
        components: {Col, Scroll, Card, Button, Modal, Split},
        data() {
            return {
                splitValue: 0.5,
                dbEnvironment: ['DAILY', 'PREPARE', 'PRODUCT'],
                menuTree: [],
                buttonProps: {
                    type: 'default',
                    size: 'small',
                },

                // 菜单弹框
                menuAddModal: false,
                menuAddModalData: null,

                // 菜单弹框表单
                menu: {
                    id: '',
                    code: '',
                    name: ''
                },

                // 权限管理弹框
                authorityModal: false,
                authorityNew: {
                    id: '',
                    code: '',
                    name: ''
                },
                columns7: [
                    {
                        title: 'ID',
                        key: 'id',
                        render: (h, params) => {
                            let fieldRow = this.data6[params.row._index];
                            let add = h('Input', {
                                props: {
                                    type: 'text',
                                    value: fieldRow.id
                                },
                                on: {
                                    'on-change': (event) => {
                                        fieldRow.id = event.target.value;
                                    }
                                }
                            });
                            let content = h('strong', params.row.id);
                            let action = params.row.action;
                            let opArr = null;
                            if ('add' === action) {
                                opArr = [add];
                            } else {
                                opArr = [content];
                            }
                            return h('div', opArr);
                        }
                    },
                    {
                        title: 'CODE',
                        key: 'code',
                        render: (h, params) => {
                            let fieldRow = this.data6[params.row._index];
                            let add = h('Input', {
                                props: {
                                    type: 'text',
                                    value: fieldRow.code
                                },
                                on: {
                                    'on-change': (event) => {
                                        fieldRow.code = event.target.value;
                                    }
                                }
                            });
                            let content = h('span', params.row.code);
                            let action = params.row.action;
                            let opArr = null;
                            if ('add' === action) {
                                opArr = [add];
                            } else {
                                opArr = [content];
                            }
                            return h('div', opArr);
                        }
                    },
                    {
                        title: 'NAME',
                        key: 'name',
                        render: (h, params) => {
                            let fieldRow = this.data6[params.row._index];
                            let add = h('Input', {
                                props: {
                                    type: 'text',
                                    value: fieldRow.name
                                },
                                on: {
                                    'on-change': (event) => {
                                        fieldRow.name = event.target.value;
                                    }
                                }
                            });
                            let content = h('span', params.row.name);
                            let action = params.row.action;
                            let opArr = null;
                            if ('add' === action) {
                                opArr = [add];
                            } else {
                                opArr = [content];
                            }
                            return h('div', opArr);
                        }
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        icon: 'ios-remove'
                                    },
                                    on: {
                                        click: () => {
                                            // this.remove(params.index)
                                            console.log('row:' + JSON.stringify(params.row));
                                        }
                                    }
                                })
                            ]);
                        }
                    }
                ],
                data6: [
                    {
                        id: 0,
                        code: '',
                        name: '',
                        action: 'add'
                    },
                    {
                        id: 'John Brown',
                        code: 18,
                        name: 'New York No. 1 Lake Park'
                    },
                    {
                        id: 'Jim Green',
                        code: 24,
                        name: 'London No. 1 Lake Park'
                    }
                ]
            }
        },
        created() {
            let that = this;
            /**
             * 获取根结点菜单列表
             */
            that.$http.get(that.$api.MENU_LIST_ROOT).then((res) => {
                if (!!res && res.length > 0) {
                    console.log("here");
                    res.forEach(root => {
                        root.title = root.name;
                        root.render = that.$util.getRootMenuOp(that).render;
                        // root.expand = true;
                        root.loading = false;
                        root.children = [];
                    });
                    that.menuTree = res;
                }
                console.log(JSON.stringify(that.menuTree));
            });
            // this.data5 = [
            //     {
            //         title: '运营平台',
            //         code: 'SAAS',
            //         expand: true,
            //         render: (h, {root, node, data}) => {
            //             return h('span', {
            //                 style: {
            //                     display: 'inline-block',
            //                     width: '100%'
            //                 }
            //             }, [
            //                 h('span', [
            //                     h('Icon', {
            //                         props: {
            //                             type: 'ios-menu'
            //                         },
            //                         style: {
            //                             marginRight: '8px'
            //                         }
            //                     }),
            //                     h('span', data.title)
            //                 ]),
            //                 h('span', {
            //                     style: {
            //                         display: 'inline-block',
            //                         float: 'right',
            //                         marginRight: '32px'
            //                     }
            //                 }, [
            //                     h('Button', {
            //                         props: Object.assign({}, this.buttonProps, {
            //                             icon: 'ios-add',
            //                             type: 'primary'
            //                         }),
            //                         style: {
            //                             width: '64px'
            //                         },
            //                         on: {
            //                             click: () => {
            //                                 this.append(data)
            //                             }
            //                         }
            //                     })
            //                 ])
            //             ]);
            //         },
            //         children: [
            //             {
            //                 title: '营销',
            //                 code: 'MARKETING',
            //                 expand: true,
            //                 children: [
            //                     {
            //                         title: 'leaf 1-1-1',
            //                         expand: true
            //                     },
            //                     {
            //                         title: 'leaf 1-1-2',
            //                         expand: true
            //                     }
            //                 ]
            //             },
            //             {
            //                 title: '设计',
            //                 code: 'DESIGN',
            //                 expand: true,
            //                 children: [
            //                     {
            //                         title: 'leaf 1-2-1',
            //                         expand: true
            //                     },
            //                     {
            //                         title: 'leaf 1-2-1',
            //                         expand: true
            //                     }
            //                 ]
            //             }
            //         ]
            //     }
            // ];
        },
        methods: {
            renderContent(h, {root, node, data}) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-menu-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                // icon: 'ios-add'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => {
                                    this.authorityModal = true;
                                }
                            }
                        }, ['权限管理']),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                // icon: 'ios-add'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => {
                                    this.append(data);
                                }
                            }
                        }, ['添加']),
                        h('Poptip', {
                            props: Object.assign({}, {
                                title: '所有下级菜单将一并删除，您确定吗？',
                                placement: 'right',
                                confirm: true
                            }),
                            on: {
                                'on-ok': () => {
                                    this.remove(root, node, data);
                                },
                                'on-cancel': () => {
                                    console.log("取消删除");
                                }
                            }
                        }, [
                            h('Button', {
                                props: Object.assign({}, this.buttonProps, {
                                    // icon: 'ios-remove'
                                })
                            }, ['删除'])
                        ]),
                        // h('Button', {
                        //     props: Object.assign({}, this.buttonProps, {
                        //         icon: 'ios-remove'
                        //     }),
                        //     on: {
                        //         click: () => {
                        //             this.remove(root, node, data);
                        //         }
                        //     }
                        // })
                    ])
                ]);
            },

            /**
             * 获取子菜单列表
             *
             * @param item
             * @param callback
             */
            loadMenuChildren(item, callback) {
                let that = this;
                console.log("item:" + JSON.stringify(item));
                // setTimeout(() => {
                    // const data = [
                    //     {
                    //         title: 'children',
                    //         loading: false,
                    //         children: []
                    //     },
                    //     {
                    //         title: 'children',
                    //         loading: false,
                    //         children: []
                    //     }
                    // ];
                    // callback(data);
                // }, 1000);
                let api = that.$api.MENU_LIST_CHILDREN;
                api += ('?id=' + item.id);

                that.$http.get(api).then((res, item) => {
                    if (!!res && res.length > 0) {
                        console.log("MENU_LIST_CHILDREN");
                        res.forEach(menu => {
                            menu.title = menu.name;
                            // menu.expand = true;
                            menu.loading = false;
                            menu.children = [];
                        });
                    }
                    callback(res);
                });
            },




            append(data) {
                this.menuAddModal = true;
                this.menuAddModalData = data;
                console.log("菜单弹框A：" + this.menuAddModal);
            },
            remove(root, node, data) {
                const parentKey = root.find((el) => el === node).parent;
                const parent = root.find((el) => el.nodeKey === parentKey).node;
                const index = parent.children.indexOf(data);
                parent.children.splice(index, 1);
                console.log("remove-parentKey:", parentKey);
                console.log("remove-parent:", JSON.stringify(parent));
                console.log("remove-index:", index);
                console.log("remove-data:", JSON.stringify(data));
            },

            // 菜单弹框函数
            cancelAddMenu() {
                console.log("取消添加菜单");
                this.menu = {};
            },
            addMenu() {
                let data = this.menuAddModalData;
                this.handleSubmit('formInline', data);
                this.menu = {};
            },

            // 菜单弹框表单函数
            handleSubmit(name, data) {
                let that = this;
                that.$Message.success('Success!');
                const children = data.children || [];
                children.push({
                    title: that.menu.name,
                    id: that.menu.id,
                    code: that.menu.code,
                    expand: true
                });
                that.$set(data, 'children', children);
            },

            // 权限管理方法
            show (index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
                })
            },
            remove (index) {
                this.data6.splice(index, 1);
            }
        },
    };
</script>

<style lang="less">
    .demo-split{
        height: 100%;
        border: 1px solid #dcdee2;
    }
    .demo-split-pane{
        padding: 10px;
    }
</style>
